<template>
   <view class="wrap" ref="uv-back-top">
      <!-- #ifdef MP-WEIXIN -->
      <uv-add-tips :duration="100000000" />
      <!-- #endif -->
      <page-nav />
      <view class="list-wrap">
         <uv-cell-group
            v-for="(item, index) in list"
            :key="index"
            :border="false"
            :title="item.groupName"
         >
            <uv-cell
               v-for="(item1, index1) in item.list"
               :key="index1"
               :title-style="{ fontWeight: 500 }"
               :title="item1.title"
               :is-link="true"
               :url="item1.path"
            >
               <template v-slot:icon>
                  <template v-if="item1.isNew">
                     <view class="new">
                        <text class="text">新</text>
                     </view>
                  </template>
                  <uv-icon :name="getIcon(item1.icon)" color="#606266" v-else></uv-icon>
               </template>
            </uv-cell>
         </uv-cell-group>
      </view>
      <uv-gap height="30" bgColor="#fff"></uv-gap>
      <uv-back-top :scroll-top="scrollTop"></uv-back-top>
   </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import listData from './components';

const scrollTop = ref(0);
const list = ref(listData) as any;

const getIcon = computed(() => {
   return (path: string) => {
      return `https://cdn.uviewui.com/uview/example/${path}.png`;
   };
});

// 页面加载时执行
onLoad(() => {
   // #ifdef APP-NVUE
   uni.showModal({
      title: '温馨提示',
      content:
         '图片等资源由于防盗链暂时无法在APP访问，所以您可能将要看到的图片都无法正常显示。大部分组件与H5效果一致，您也可以查看H5演示。',
      showCancel: false,
      confirmText: '我知道了',
   });
   // #endif
});
// 监听页面滚动，用于控制返回顶部按钮的显示
onPageScroll(e => {
   scrollTop.value = e.scrollTop;
});
</script>

<style lang="scss" scoped>
.uv-cell-icon1 {
   width: 36rpx;
   height: 36rpx;
   margin-right: 8rpx;
}
.uv-cell-group__title__text {
   font-weight: bold;
}
.new {
   /* #ifndef APP-NVUE */
   display: flex;
   /* #endif */
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 40rpx;
   height: 40rpx;
   line-height: 40rpx;
   text-align: center;
   background: #f3f4f6;
   border-radius: 4rpx;
   .text {
      font-size: 28rpx;
      color: $uv-primary;
   }
}
</style>
